<template>
  <div class="gsproduct">
    <div class="discount">
        <div class="discount-title clearfix">
          <span
          @click="handleBack"
          class="mui-icon mui-icon-arrowleft"></span>
          <h2 class="">凑单品</h2>
        </div>
    </div>
    <div class="container">
      <div class="nav">
        <div class="navList">
          <a href="javascript:void(0);" @click="jdModulShow">
            {{shopName}}
            <span :class="['mui-icon', show ? 'mui-icon-arrowdown' : 'mui-icon-arrowup']"></span>
          </a>
          <a href="javascript:void(0);" @click="hbModulShow">
            {{areaName}}
            <span :class="['mui-icon', show2 ? 'mui-icon-arrowdown' : 'mui-icon-arrowup']"></span>
          </a>
          <a href="javascript:void(0);">全部价格
            <span :class="['mui-icon', show ? 'mui-icon-arrowdown' : 'mui-icon-arrowup']"></span>
          </a>
        </div>
        <div class="nav-search"></div>
        <ul class="two-nav" ref="twoNav" v-show="show">
          <li v-for="(item ,index) in jdModulList" :key="index">
            <a href="javascript:void(0)" @click="setJDModule(item.shopName,item.shopId)">
              {{item.shopName}}
            </a>
          </li>
        </ul>
        <ul class="two-nav2" ref="twoNav2" v-show="show2">
          <li v-for="(item ,index) in hbModulList" :key="index">
            <a href="javascript:void(0)" @click="setHBModule(item.areaName,item.areaId)">
              {{item.areaName}}
            </a>
          </li>
        </ul>
      </div>
      <div class="productList">
        <ul>
          <li v-for="(item , index) in list" :key="index">
            <a href="javascript:void(0)">
              <img :src="item.productImg" alt="">
              <p>{{item.productName}}</p>
              <div>
                <span>{{item.productPrice}}</span>
                <button>去凑单</button>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmFooter from "./publicComponents/mmFooter.vue"
import mui from '../lib/mui/js/mui.min.js'
export default {
  data() {
    return {
      list: [],
      jdModulList: [],
      hbModulList:[],
      show: false,
      shopName: '京东',
      areaName: '华北',
      shopid: 0,
      areaid:0,
      show2: false,
      isShow: false,
      mask: '',
      mask2: ''
    }
  },
  created() {
    this.getjdModulList()
    this.gethbModulList()
    this.getShopList(this.shopid ,this.areaid)
    this.mask = mui.createMask(this.hiddenAll);//callback为用户点击蒙版时自动执行的回调；
    this.mask2 = mui.createMask(this.hiddenAll);//callback为用户点击蒙版时自动执行的回调；
  },
  methods: {
    getjdModulList() {
      this.$http.get('api/getgsshop').then((res) => {
        this.jdModulList = res.body.result
      })
    },
    gethbModulList() {
      this.$http.get('api/getgsshoparea').then((res) => {
        this.hbModulList = res.body.result
      })
    },
    getShopList(shopid , areaid) {
      this.$http.get('api/getgsproduct?shopid='+shopid+'&areaid='+areaid).then((res) => {
        this.list = res.body.result
        // console.log(this.list)
      })
    },
    jdModulShow() {
      //点击展示模块shop1
      //判断如果shop2存在，则让shop2关闭，同时关闭shop2的蒙版
      if(this.show2) {
        this.show2 = !this.show2
        this.mask2.close()
      }
      //然后开启自己的蒙版和下拉模块
      this.show = !this.show
      //this.maskShow(this.hiddenAll)
      //判断---点击是关闭还是开启
      if(!this.show) {
        this.mask.close()
        return
      }
      //
      this.mask.show()
    },
    hbModulShow() {
      if(this.show) {
        this.show = false
        this.mask.close()
      }
      this.show2 = !this.show2
      if(!this.show2) {
        this.mask2.close()
        return
      }
      this.mask2.show()
    },
    setJDModule(i,n) {
      this.shopName = i
      this.shopid = n
      this.jdModulShow()
      this.mask.close()
    },
    setHBModule(i,n) {
      this.areaName = i.slice(0,2)
      this.areaid = n
      this.hbModulShow()
      this.mask2.close()
    },
    hiddenAll() {
      this.show = false
      this.show2 = false
    },
    handleBack() {
      this.$router.go(-1)
    }
  },
  watch: {
    shopid: function(newVal ,oldVal) {
      this.getShopList(newVal,this.areaid)
    },
    areaid: function(newVal ,oldVal) {
      this.getShopList(this.shopid,newVal)
    }
  },
  components: {
    mmFooter
  }
}
</script>
<style lang="less" scoped>
@import "../../src/less/var";
.gsproduct{
  .discount-title {
    height: 98 / @base;
    padding: 10 / @base 15 / @base;
    background-color: #ff9e20;
    position: relative;
    h2 {
      font-size: 28 / @base;
      height: 100%;
      line-height: 70 / @base;
      margin: 0;
      text-align: center;
      margin: 0 auto;
    }
    span {
      font-size: 40 / @base;
      height: 100%;
      line-height: 70 / @base;
      position: absolute;
      left: 20/@base;
    }
  }
  .container {
    .nav {
      width: 100%;
      height: 75/@base;
      font-size: 26/@base;
      line-height: 75/@base;
      position: relative;
      padding-right: 75/@base;
      background-color: #fff;
      z-index: 99999;
      .navList {
        display: flex;
        a {
          display: block;
          flex: 1;
          text-align: center;
          color: #000;
          position: relative;
          span {
            font-size: 24/@base;
          }
        }
      }
      .nav-search {
        position: absolute;
        width: 75/@base;
        height: 75/@base;
        right: 0;
        top: 0;
      }
      ul.two-nav ,
      ul.two-nav2 {
        position: absolute;
        top: 75/@base;
        width: 100%;
        z-index: 99;
        background-color: #fff;
        li {
          height: 70/@base;
          line-height: 70/@base;
          font-size: 26/@base;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          padding: 0 30/@base;
          a {
            display: block;
            color: #000;
          }
        }
      }
    }
    .productList {
      ul {
        display: flex;
        flex-wrap: wrap;
        padding: 10/@base;
        li {
          width: 49%;
          height: 486/@base;
          background-color: #fff;
          margin-top: 10/@base;
          padding: 5/@base 20/@base;
          &:nth-child(2n) {
            margin-left: 5/@base;
          }
          &:nth-child(2n-1) {
            margin-right: 5/@base;
          }
          a {
            display: block;
            img {
              height: 300/@base;
            }
            p {
              font-size: 24/@base;
              white-space: initial;
              height: 80/@base;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            div {
              padding: 10/@base 20/@base;
              span {
                font-size: 36/@base;
                color: red;
              }
              button{
                font-size: 24/@base;
                padding: 6/@base 12/@base;
                float: right;
              }
            }
          }
        }
      }
    }
  }
}
</style>
